Skip to content

fix(Experiments): Dark mode visibility in results page#7980

Open
Zaimwa9 wants to merge 1 commit into
mainfrom
fix/dark-mode-tokens-in-experimentation-results
Open

fix(Experiments): Dark mode visibility in results page#7980
Zaimwa9 wants to merge 1 commit into
mainfrom
fix/dark-mode-tokens-in-experimentation-results

Conversation

@Zaimwa9

@Zaimwa9 Zaimwa9 commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Changes

Fix dark mode visibility issues on the experiment results page:

  • Variant names invisible in recommendation card
  • Hypothesis text too faint
  • Stat card titles barely visible
  • Chip/tag backgrounds blending into background
  • "Baseline" text invisible in scorecard table

How did you test this code?

Toggled dark mode and verified all affected elements are visible.

@vercel

vercel Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Jul 10, 2026 1:46pm
flagsmith-frontend-staging Ready Ready Preview, Comment Jul 10, 2026 1:46pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Jul 10, 2026 1:46pm

Request Review

@Zaimwa9 Zaimwa9 requested a review from a team as a code owner July 10, 2026 11:39
@Zaimwa9 Zaimwa9 requested review from kyle-ssg and removed request for a team July 10, 2026 11:39
@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jul 10, 2026
@github-actions

github-actions Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-7980 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-7980 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7980 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-7980 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7980 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7980 Finished ✅ Results ✅

@github-actions github-actions Bot added the fix label Jul 10, 2026
@coderabbitai

coderabbitai Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 23874c25-77df-4e5b-8cbf-98f4b9408316

📥 Commits

Reviewing files that changed from the base of the PR and between 1e0c08f and 3013c22.

📒 Files selected for processing (5)
  • frontend/web/components/experiments/results/ExperimentConfiguration.tsx
  • frontend/web/components/experiments/results/ExperimentDetailHeader.tsx
  • frontend/web/components/experiments/results/ExperimentResultsScorecardTable.tsx
  • frontend/web/components/experiments/results/StatCard.tsx
  • frontend/web/components/experiments/results/results.scss
📝 Walkthrough

Walkthrough

Experiment results styling now uses a dedicated tag class for feature flag and primary metric tags. Hypothesis, scorecard, and stat card text switches from text-muted to text-secondary, while recommendation text uses the default colour. Existing rendering logic, data handling, and component structure remain unchanged.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  4 passed

Details

stats  4 tests across 3 suites
duration  17.4 seconds
commit  1e0c08f
info  🔄 Run: #18156 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  4 passed

Details

stats  4 tests across 4 suites
duration  45 seconds
commit  1e0c08f
info  🔄 Run: #18156 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  6 passed

Details

stats  6 tests across 5 suites
duration  56.6 seconds
commit  1e0c08f
info  🔄 Run: #18156 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  5 passed

Details

stats  5 tests across 3 suites
duration  4.6 seconds
commit  1e0c08f
info  🔄 Run: #18156 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  4 passed

Details

stats  4 tests across 3 suites
duration  46.8 seconds
commit  3013c22
info  🔄 Run: #18160 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  4 passed

Details

stats  4 tests across 3 suites
duration  19 seconds
commit  3013c22
info  🔄 Run: #18160 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  3 passed

Details

stats  3 tests across 2 suites
duration  12.4 seconds
commit  3013c22
info  🔄 Run: #18160 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  4 passed

Details

stats  4 tests across 2 suites
duration  18.7 seconds
commit  3013c22
info  🔄 Run: #18160 (attempt 1)

@github-actions

github-actions Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Visual Regression

19 screenshots compared. See report for details.
View full report

@Zaimwa9 Zaimwa9 requested review from talissoncosta and removed request for kyle-ssg July 10, 2026 12:28
talissoncosta
talissoncosta reviewed Jul 10, 2026
View reviewed changes
Comment thread frontend/web/components/experiments/results/ExperimentDetailHeader.tsx
@Zaimwa9 Zaimwa9 force-pushed the fix/dark-mode-tokens-in-experimentation-results branch from 1e0c08f to 3013c22 Compare July 10, 2026 13:45
@github-actions github-actions Bot added fix and removed fix labels Jul 10, 2026
talissoncosta
talissoncosta approved these changes Jul 10, 2026
View reviewed changes

@talissoncosta talissoncosta left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job @Zaimwa9 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@talissoncosta talissoncosta talissoncosta approved these changes

Assignees

@talissoncosta talissoncosta

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Zaimwa9 @talissoncosta